<template>
	<view class="xgpassword">
		<Hearder :name="'修改绑定手机号'"></Hearder>
		<view class="content">
			<view class="itemList">
				<view class="showgm">+86</view>
				<input type="text" placeholder="请输入您的新的手机号" placeholder-style="color:#999" v-model="phone" />
			</view>
			<view class="itemList yzm">
				<view>验证码</view>
				<input type="text" placeholder="请输入验证码" placeholder-style="color:#999" v-model="code" />
				<text class="getcode" @click="getCode">{{initcode}}</text>
			</view>
			<view class="nextBtn" @click="nextsubmit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				initcode:'发送',
				phone:'',
				code:'',
				second:60
			}
		},
		onLoad(options) {
			
		},
		methods:{
			nextsubmit(){
				this.request('/member/editMemberPhone',{phone:this.phone,ver_code:this.code,type:2}).then(res => {
					if(res.data.code==1){
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}	
				})
			},
			getCode(){
				var that=this
				if(this.initcode=='发送'){
					this.request('/v1/sms',{phone: this.phone},'GET').then(res => {
						if(res.data.code==1){
							 this.$tip(res.data.msg);
							 var interval = setInterval(() => {
							    --this.second
							    that.initcode=this.second+'s'
							 }, 1000)
							 setTimeout(() => {
							    clearInterval(interval)
							    this.initcode='发送'
								this.second=60
							 }, 60000)
						}else{
							this.$tip(res.data.msg);
						}
					})
				}
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.xgpassword{
		overflow: hidden;
		height: 100%;
		.content{
			padding: 0 10%;
			.itemList{
				display: flex;
				align-items: center;
				overflow: hidden;
				border-bottom: 2rpx solid rgba(238,238,238,1);
				height: 70rpx;
				margin-top: 60rpx;
				.showgm{
					width: 72rpx;
					height: 30rpx;
					border-right: 2rpx solid #eee;
					line-height: 30rpx;
				}
				input{
				  width: 78%;
				  height: 80%;
				  margin-left: 49rpx;
				  margin-top: 2rpx;
				}
				.getcode{
					width: 133rpx;
					height: 50rpx;
					text-align: right;
					line-height: 50rpx;
					color: $uni-item-color;
				}
			}
			.yzm input{
				width: 58%;
				margin-left: 30rpx;
			}
			.nextBtn{
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: $uni-item-color;
				margin-top: 54rpx;
				color: #fff;
			}
		}
	}
</style>
